<template>
  <section class="app-inner">
    <!-- :visible.sync="dialogVisible"  -->
    <el-dialog :visible="true" :title="title" :before-close="handleClose" center width="860px">
      <el-form ref="editFormRef" :model="editForm" :rules="rules" size="small">
        <el-form-item label="年级" :label-width="labelWidth" prop="grade" class="line">
          <el-cascader v-model="editForm.grade" placeholder="请选择年级" auto-complete="off" class="selectWidth"
            :options="options" @change="handleChange" v-if="editForm.grade.length === 0"></el-cascader>
          <el-input clearable auto-complete="off" v-else v-model="grade" @change="gradeChange"></el-input>
        </el-form-item>

        <el-form-item label="入学年份" :label-width="labelWidth" prop="year" class="line">
          <el-input v-model="editForm.year" :disabled="true" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="班级序号" :label-width="labelWidth" prop="classNum" class="line">
          <el-select @change="changeClassNum" v-model="editForm.classNum" clearable placeholder="请选择班级序号"
            class="selectWidth" auto-complete="off">
            <el-option v-for="item in classNumList" :key="item.value" :label="item.name" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="班级名称" :label-width="labelWidth" prop="name" class="line">
          <!-- v-model="editForm.name" -->
          <el-input v-model="editForm.name" disabled auto-complete="off" clearable></el-input>
        </el-form-item>

        <el-form-item label="班主任" :label-width="labelWidth" prop="headerNo" class="line">
          <el-select filterable v-model="editForm.headerNo" clearable placeholder="请选择班主任" class="selectWidth"
            auto-complete="off">
            <el-option v-for="item in selectTeacherList" :key="item.no" :label="item.name" :value="item.no"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="学段" :label-width="labelWidth" class="line">
          <el-select v-model="editForm.period" clearable placeholder="请选择学段" class="selectWidth" auto-complete="off">
            <el-option label="小学" value="1"></el-option>
            <el-option label="初中" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="教室" :label-width="labelWidth" prop="classRoom" class="line">
          <el-select filterable v-model="editForm.classRoomNo" clearable placeholder="请选择教室" class="selectWidth"
            auto-complete="off">
            <el-option v-for="item in classRoomList" :key="item.no" :label="item.name" :value="item.no"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="班级人数" :label-width="labelWidth" prop="typeName" class="line">
          <el-input v-model="editForm.size" placeholder="请输入班级人数" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="班级状态" :label-width="labelWidth" prop="status" class="line">
          <el-select v-model="editForm.status" clearable placeholder="请选择班级状态" class="selectWidth" auto-complete="off">
            <el-option label="有效" value='1'></el-option>
            <el-option label="失效" value='0'></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="班级类型" :label-width="labelWidth" prop="typeName" class="line">
          <el-select v-model="editForm.type" clearable placeholder="请选择班级类型" class="selectWidth" auto-complete="off">
            <el-option v-for="item in classTypeList" :key="item.code" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否少数名族双语班" :label-width="150 + 'px'" prop="Bilingual" class="line">
          <el-select v-model="editForm.isMinority" clearable class="selectWidth1" @change="changeIsMinorityFn"
            auto-complete="off">
            <el-option label="是" value="0"></el-option>
            <el-option label="否" value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="双语教学语言" :label-width="labelWidth" class="line">
          <el-select filterable v-model="editForm.minorityCode" clearable class="selectWidth" auto-complete="off"
            :disabled="editForm.isMinority === '1'">
            <el-option v-for="item in languageList" :key="item.code" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div class="itemWrapper">
        <span class="itemTitle">任课教师信息</span>
        <el-button type="primary" :disabled="teacherTableData.length === subjects.length" class="itemBtn"
          @click="addTeacherFn">新增任课老师</el-button>
      </div>

      <el-table border :key="i" :data="teacherTableData" style="width: 100%" ref="teacherTable">
        <el-table-column type="index" label="序号" width="120"></el-table-column>
        <el-table-column prop="subject" label="学科">
          <template slot-scope="scope">
            <el-select v-model="scope.row.subjectNo" placeholder="请选择学科" @change="changeSubject(scope.row)"
              class="subjectSelect" auto-complete="off">
              <el-option v-show="item.flag" v-for="item in subjects" :key="item.no" :label="item.name" :value="item.no">
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column prop="teacherName" label="任课老师">
          <template slot-scope="scope">
            <el-input v-model="scope.row.teacherName" class="subjectSelect" placeholder="请选择任课老师" auto-complete="off"
              disabled></el-input>
            <!-- <div class="subjectSelect bindingbtn">
                <el-autocomplete
                  :popper-append-to-body="false"
                  class="inline-input"
                  value-key="name"
                  v-model="scope.row.teacherName"
                  :fetch-suggestions="querySearch"
                  placeholder="请输入内容"
                  :trigger-on-focus="false"
                  @select="selectItemFn"
                  @focus="focusFn(scope.$index)"
                >
                <template slot-scope="scope">
                  <p>{{scope.item.name}}-{{scope.item.value}}</p>
                  <el-tooltip class="item" effect="dark" :content="scope.item.value" placement="top-start"></el-tooltip>
                </template>
                </el-autocomplete>
              </div> -->

            <!-- <el-select filterable v-model="scope.row.teacherNo" class="subjectSelect" placeholder="请选择班主任" auto-complete="off">
                <el-option
                  v-for="item in selectTeacherList"
                  :key="item.no"
                  :label="item.name"
                  :value="item.no"
                ></el-option>
              </el-select> -->
            <el-button type="primary" class="btnCss" size="small" @click="editTeacherFn(scope.row, scope.$index)">选择
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="itemWrapper">

        <div class="title">
          <span class="itemTitle">班级学生信息</span>
          <div class="textBtn">
            <el-button type="text" icon="el-icon-delete" @click="removeStu">删除</el-button>
          </div>
        </div>

        <div class="btnListsCss">
          <el-button type="primary" class="itemBtn" @click="downFile">下载模板</el-button>
          <el-upload style="display: inline; margin-left: 5px" :show-file-list="false" action="no" class="itemBtn"
            :before-upload="beforeUpload" :http-request="importExcel">
            <el-button type="primary" icon="import">批量导入</el-button>
          </el-upload>
          <el-button type="primary" class="itemBtn" @click="openStudentTable">新增学生</el-button>
        </div>

      </div>

      <el-table ref="multipleTable" :data="studentTableData" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange" :row-key="bindRowKey" @select="selectedRow"
        @select-all="selectedAllFn">
        <el-table-column type="selection" :reserve-selection="true" width="80"></el-table-column>
        <el-table-column prop="eduNo" label="学号" width="48"></el-table-column>
        <el-table-column prop="name" label="姓名" width="60" show-overflow-tooltip></el-table-column>
        <el-table-column prop="sex" label="性别" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.gender === 0 ? '未知性别' : scope.row.gender === 1 ? '男'
                : scope.row.gender === 2 ? '女' : '未说明的性别'
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="birthday" label="出生日期" show-overflow-tooltip></el-table-column>
        <el-table-column prop="account" label="账号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="imageUrl" label="照片" show-overflow-tooltip>
          <template slot-scope="scope">
            <!-- <img :src="scope.row.imageUrl" class="imgCss" v-show="scope.row.imageUrl!==null" /> -->
            <el-image class="imgCss" v-show="scope.row.imageUrl !== null"
              :src="`/gateway/api/basic/minio/getFileSource?fileName=${scope.row.imageUrl}`" :preview-src-list="[
                `/gateway/api/basic/minio/getFileSource?fileName=${scope.row.imageUrl}`,
              ]">
              <div slot="error" class="image-slot"></div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="contact" label="联系方式" show-overflow-tooltip></el-table-column>
        <el-table-column prop="status" label="账号状态" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ !scope.row.account || scope.row.status === null ? '' :
                scope.row.status === 0 ? '禁用' : '启用'
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="nationRes" label="民族" show-overflow-tooltip></el-table-column>
      </el-table>

      <el-pagination class="paginationCss" v-if="studentTableData.length > 0" layout="total, prev, pager, next"
        @current-change="changePage" :current-page="queryParams.pageNum" :page-size="queryParams.pageSize"
        :total="totalCount"></el-pagination>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel" size="small">取 消</el-button>
        <el-button type="primary" @click="handleSave('editFormRef')" size="small">确 定</el-button>
      </div>
      <div style="margin-top: 20px"></div>
    </el-dialog>

    <add-student-table ref="studentTable" @checkedEduNo="checkedEduNo" @getResultAddStudent="getResultAddStudent">
    </add-student-table>
    <add-teacher ref="addTeacher" @selectTeacherFn="selectTeacherFn"></add-teacher>
  </section>
</template>

<script>
import addStudentTable from './addStudentTable.vue'
import { Message } from 'element-ui'
import addTeacher from './addTeacher.vue'
// import { queryPage } from '../js/teacherInfo.js'
import { getClassRoomList } from '../js/classRoomInfo'
import { getSubjectAndId } from '../js/subjectInfo.js'
import { getGradeAndYear, queryTeacherSelectList } from '../js/gradeInfo.js'
import { addClassQuery, selectStudentInfoFile, downloadStudentTemplate } from '../js/class.js'
export default {
  name: 'addClass',
  components: {
    addStudentTable,
    addTeacher
  },
  data () {
    return {
      title: '新增班级',
      // isAdd: false,
      dialogVisible: false,
      city: '',
      // tempName: '',
      // citys: ['北京', '北海', '东北', '上海', '武汉', '东京', '广州', '广元市', '上饶', '上水市'],
      // selectCitys: [],
      // studentsTable: [],
      // subjectTable: [],
      subjects: [], // 科目列表
      classRoomList: [], // 教室列表
      options: [], // 年级+入学年份列表
      selectTeacherList: [], // 班主任列表数据
      classNumList: [], // 班级序号
      studentTable: [], // 需要提交的学生 由学号以及学籍号组成的数组
      allStudentTable: [], // 分页前的所有数据
      // restaurants: [], // 联想搜索的数据
      grade: '', // 级联选择器中的数据
      eduErr: 0, // 监测班内学号重复
      eduErrArr: [], // 学号重复的学生
      stuNoErr: 0, // 监测班内有重复的学生
      stuNoErrArr: [], // 学生重复的学生
      teacherTableData: [], // 学科表
      studentTableData: [], // 学生表
      multipleSelection: [], // 多选框选中的数据
      languageList: [], // 双语教学列表
      classTypeList: [], // 班级类型列表
      bindRowKey (row) {
        return row.code
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10
        // status: 1
      },
      i: 1,
      totalCount: 1,
      editForm: {
        name: '',
        period: '',
        grade: [],
        year: '',
        headerNo: '',
        size: null,
        classRoomNo: '',
        status: '',
        isMinority: '',
        minorityCode: ''
      },
      currentRow: {}, // 任课：保存当前行内容
      currentTeacherRow: -1, // 任课：当前选中行
      labelWidth: '120px',
      rules: {
        name: [{ required: true, message: '请选择班级名称' }],
        grade: [{ required: true, message: '请选择年级' }],
        year: [{ required: true, message: '请选择入学年份' }],
        status: [{ required: true, message: '请选择班级状态' }],
        classNum: [{ required: true, message: '请选择班级序号' }],
        headerNo: [{ required: true, message: '请选择班主任' }]
      }
    }
  },
  computed: {
    // self： this
    tempName: (self) => {
      let { classNum } = self.editForm
      let { grade } = self
      return { grade, classNum }
    }
  },
  mounted () {
    this.editForm = Object.assign({}, this.editForm)
    let nation = '民族'
    this.nationList = this.$dictionary[nation] // 从字典表获取民族列表
    this.classTypeList = this.$dictionary.classType // 从字典表获取班级类型列表
    this.languageList = this.$dictionary.minoritylanguages // 从字典表获取双语教学语言列表
    this.selectClassRoomFn() // 获取教室列表
    this.getSubjectList() // 获取学科列表
    this.getGradeAndYearList() // 获取年级、入学年份列表
    this.getTeacherList() // 获取教师列表
    this.getClassNumList() // 获取班级序号列表
  },
  watch: {
    //  同时监听 年级输入框  和 班级序号输入框
    tempName (val) {
      if (val.classNum && val.grade) {
        const grade = val.grade.includes('高') || val.grade.includes('初') ? val.grade : val.grade.substring(0, 1)
        this.editForm.name = `${grade}（${val.classNum}）班`
      }
    },
    // 监听学生表 翻页后仍保留选中的数据
    studentTableData (val) {
      val.forEach(item => {
        this.multipleSelection.forEach(self => {
          if (item.no === self.no) {
            this.$refs.multipleTable.toggleRowSelection(item, true)
          }
        })
      })
    }
  },
  methods: {
    // 导入前的验证
    beforeUpload (file) {
      const extension = file.name.split('.')[1] === 'xls'
      const extension2 = file.name.split('.')[1] === 'xlsx'
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!extension && !extension2) {
        this.$message.warning('上传模板只能是 xls、xlsx格式!')
        return false
      } else if (!isLt2M) {
        this.$message.warning('上传模板大小不能超过 5MB!')
        return false
      } else {
        return true
      }
    },

    // EXCEL导入
    importExcel (file, fileList) {
      let headFile = file.file
      let formData = new FormData()
      formData.append('file', headFile)
      selectStudentInfoFile(formData).then((res) => {
        this.$message.success('导入成功')
        // 成功后将数据回显在表格中 以及重新分页
        res.data.forEach(item => {
          this.nationList.forEach(naItem => {
            if (item.nation === naItem.code) {
              item.nationRes = naItem.name
            }
          })
          item.name = item.studentName
          item.no = item.studentNo
          this.studentTable.push({ eduNo: item.eduNo, studentNo: item.studentNo })
          this.allStudentTable.unshift(item)
        })
        // 分页
        this.groupStudentArr = this.groupTable(this.allStudentTable)
        this.queryParams.pageNum = 1
        this.studentTableData = this.groupStudentArr[0]
        this.totalCount = 0 || this.allStudentTable.length
      })
    },

    // 选择年级级联选择器
    async handleChange (val, row) {
      /*
        级联选择器，结果是一个数组
        val: ['年级label对应的value值'，'年份对应的value']
        options是级联选择器的 选择项 数组
      */
      this.editForm.gradeNo = ''
      let newValue = this.options.filter(item => {
        if (item.value === val[0]) {
          return item
        }
      })
      let newYear = newValue[0].children.filter(item => {
        if (item.value === val[1]) {
          return item
        }
      })
      this.editForm.year = newYear[0].label
      this.grade = newValue[0].label
      this.editForm.gradeNo = val[1]
    },

    // 班级序号
    getClassNumList () {
      let i = 1
      for (i; i <= 30; i++) {
        let obj = {}
        obj.name = i
        obj.value = `${i}`
        this.classNumList.push(obj)
      }
    },

    // 获取 年级入学年份数据
    async getGradeAndYearList () {
      let res = await getGradeAndYear()
      let { data } = res
      data.forEach((item, index) => {
        let fObj = {}
        fObj.value = index + 1
        fObj.label = item.name
        fObj.children = []
        item.gradeInfo.forEach((yItem) => {
          fObj.children.push({ value: yItem.no, label: yItem.year })
        })
        this.options.push(fObj)
      })
    },

    // 教室选择器
    async selectClassRoomFn () {
      try {
        let res = await getClassRoomList()
        if (res.code === 0) {
          this.classRoomList = res.data
        }
      } catch (e) { }
    },

    // 获取老师选择器
    async getTeacherList () {
      let query = {
        positionType: '1'
      }
      let res = await queryTeacherSelectList(query)
      this.selectTeacherList = res.data
    },

    // async querySearch (queryString, cb) {
    //   let query = {
    //     accountStatus: 1,
    //     name: queryString,
    //     pageNum: 1,
    //     pageSize: 10
    //   }
    //   let restaurants = []
    //   let res = await queryPage(query)
    //   await res.data.records.forEach(item => {
    //     let obj = {}
    //     obj.name = item.name
    //     obj.value = item.no
    //     restaurants.push(obj)
    //   })
    //   cb(restaurants)
    // },

    // 当前行获取焦点保存当前行index
    focusFn (index) {
      this.currentTeacherRow = index
    },

    // 保存传递回的数据
    selectItemFn (val) {
      this.teacherTableData[this.currentTeacherRow].teacherNo = val.value
      // this.teacherTableData[this.currentTeacherRow].teacherNo = val.value
    },

    // 学科选择器
    async getSubjectList () {
      let res = await getSubjectAndId()
      if (res.code === 0) {
        this.subjects = res.data
      }
      this.subjects.forEach(item => {
        item.flag = true
      })
    },

    // 选择班级序号
    changeClassNum (val) {
      if (this.grade === '') {
        Message({
          type: 'error',
          message: '年级未选择'
        })
        this.editForm.name = ''
        return false
      }
    },

    // 清空年级选择器
    gradeChange () {
      this.editForm.grade = []
      this.editForm.name = ''
      this.editForm.year = ''
    },
    // 更改 是否双语班 选项
    changeIsMinorityFn (val) {
      console.log(val)
      if (val === '1' || val === '') {
        // this.rules.minorityCode[0].required = false
        this.editForm.minorityCode = null
      }
      //  else {
      //   this.rules.minorityCode[0].required = true
      // }
    },

    // 提交表单
    handleSave (editFormRef) {
      let flag = false
      let students = []
      this.allStudentTable.forEach(item => {
        let obj = {}
        obj.eduNo = item.eduNo
        obj.studentNo = item.no
        students.push(obj)
      })
      // let subjects = this.teacherTableData
      let subjects = []
      this.teacherTableData.forEach(item => {
        let obj = {}
        if (!item.subjectNo || !item.teacherNo) {
          flag = true
        }
        obj.subjectNo = item.subjectNo
        obj.teacherNo = item.teacherNo
        subjects.push(obj)
      })
      // subjects.forEach(item => {
      //   delete item.teacherName
      //   if (!item.subjectNo || !item.teacherNo) {
      //     flag = true
      //   }
      // })
      if (flag) {
        Message({
          type: 'error',
          message: '课程或任课老师未选择'
        })
        subjects = []
        return
      }
      this.$refs[editFormRef].validate(async valid => {
        if (valid) {
          let res, msg
          let query = {
            ...this.editForm,
            isMinority: +this.editForm.isMinority,
            status: +this.editForm.status,
            subjects,
            students
          }
          delete query.grade
          res = await addClassQuery(query)
          msg = '保存成功！'
          if (res.code === 0) {
            this.$message.success(msg)
            this.handleCancel()
          } else {
            this.$message.warning(res.msg)
          }
        }
      })
      this.dialogVisible = false
    },

    // 取消新增
    handleCancel () {
      this.$parent.addClassFlag = false
      this.options = []
      this.dialogVisible = false
      Object.assign(this.$data, this.$options.data())
    },

    // 关闭弹窗
    handleClose () {
      this.$parent.addClassFlag = false
      this.dialogVisible = false
      // Object.assign(this.$data, this.$options.data())
    },

    // 新增课程行
    addTeacherFn () {
      this.teacherTableData.push({ subjectNo: '', teacherNo: '' })
      this.filterItem()
    },

    // 选择学科
    changeSubject (row) {
      this.subjects.forEach(tempItem => {
        tempItem.flag = true
      })
      this.filterItem()
    },
    // 课程可选项筛选
    filterItem () {
      this.teacherTableData.forEach(item => {
        this.subjects.forEach(tItem => {
          if (tItem.no === item.subjectNo) {
            tItem.flag = false
          }
        })
      })
    },

    // 修改任课老师
    editTeacherFn (row, index) {
      // 保存当前行
      const type = 'addClass'
      this.currentRow = index
      this.$refs.addTeacher.add({ row, type })
    },

    selectTeacherFn (data) {
      console.log(data)
      this.teacherTableData[this.currentRow].teacherNo = data.no
      this.teacherTableData[this.currentRow].teacherName = data.name

      this.i++
    },
    // 新增学生
    async openStudentTable () {
      const type = 'addClassInto'
      let row = {}
      this.$refs.studentTable.add({ row, type })
    },

    // 下载模板
    async downFile () {
      try {
        let res = await downloadStudentTemplate()
        if (res.code === 0) {
          Message({
            type: 'success',
            message: '下载中'
          })
        }
      } catch (e) { }
    },

    // 选中删除
    async removeStu () {
      await this.setArr()
      let tempArr = []
      this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.allStudentTable.forEach(item => {
          if (!item.checkedFlag) {
            tempArr.push(item)
          }
          this.allStudentTable = tempArr
          this.groupStudentArr = this.groupTable(this.allStudentTable)
          this.totalCount = 0 || this.allStudentTable.length
          this.queryParams.pageNum = 1
          this.studentTableData = this.groupStudentArr[0]
          this.$refs.multipleTable.clearSelection()
          this.$message.success('删除成功！')
        })
      }).catch(() => { })
    },
    // 选中的数据去重
    setArr () {
      let teacherArr = []
      let obj = {}
      this.multipleSelection.forEach((item) => {
        if (obj[item.no]) {
          return 0
        } else {
          obj[item.no] = true
          teacherArr.push(item)
        }
      })
      this.multipleSelection = teacherArr
    },
    // 删除班级下的学生
    delStudent (row) {
      // 从表格总数中删去当前条记录，由于手动做的分页，需要重新做
      let temp = this.allStudentTable
      let result = temp.filter(item => {
        if (item.no !== row.no) {
          return item
        }
      })
      this.allStudentTable = result
      this.groupStudentArr = this.groupTable(this.allStudentTable)
      if (this.allStudentTable.length <= this.queryParams.pageSize) {
        this.studentTableData = this.groupStudentArr[0]
        this.queryParams.pageNum = 1
      } else {
        this.studentTableData = this.groupStudentArr[this.queryParams.pageNum - 1]
      }
      this.totalCount = 0 || this.allStudentTable.length
    },
    // 检查班内学号是否重复
    checkedEduNo (data) {
      this.eduErr = this.stuNoErr = 0
      this.eduErrArr = []
      this.stuNoErrArr = []
      const students = data
      students.forEach(item => {
        if (this.allStudentTable.length > 0) {
          this.allStudentTable.forEach(allItem => {
            if (allItem.eduNo === item.eduNo) {
              this.eduErr++
              this.eduErrArr.push(allItem.name)
            }
            if (allItem.no === item.studentNo) {
              this.stuNoErr++
              this.stuNoErrArr.push(allItem.name)
            }
          })
        }
      })
    },
    // 获得增加到班级的学生
    getResultAddStudent (data) {
      this.eduErr = this.stuNoErr = 0
      // data.students.forEach(item => {
      //   this.studentTable.push(item)
      // })
      data.row.forEach(item => {
        item.checkedFlag = false
        this.allStudentTable.push(item)
        // this.studentTableData.push(item)
      })
      this.allStudentTable.forEach(item => {
        this.nationList.forEach(naItem => {
          if (item.nation === naItem.code) {
            item.nationRes = naItem.name
          }
        })
      })
      this.groupStudentArr = this.groupTable(this.allStudentTable)
      this.queryParams.pageNum = 1
      this.studentTableData = this.groupStudentArr[0]
      this.totalCount = 0 || this.allStudentTable.length
    },
    // 手动做分页
    groupTable (data) {
      let tempArr = []
      if (data.length < this.queryParams.pageSize) {
        tempArr[0] = data
      } else {
        let i = 10
        let j = 0
        let page = Math.ceil(data.length / this.queryParams.pageSize)
        for (j; j < page; j++) {
          if ((j + 1) === page) {
            tempArr[j] = data.slice(j * i, data.length)
          } else {
            tempArr[j] = data.slice(j * i, (j + 1) * 10)
          }
        }
      }
      return tempArr
    },
    // 更改页数
    changePage (val) {
      this.queryParams.pageNum = val
      this.studentTableData = this.groupStudentArr[val - 1]
    },
    // 学生列表选择框
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    selectedRow (selection, row) {
      row.checkedFlag = !row.checkedFlag
    },
    selectedAllFn (selection) {
      if (selection.length === 0) {
        let { pageNum, pageSize } = this.queryParams
        let i = 0
        for (i; i < pageSize; i++) {
          this.allStudentTable[(pageNum - 1) * pageSize + i].checkedFlag = false
        }
      } else {
        selection.forEach(item => {
          this.allStudentTable.forEach(allItem => {
            if (allItem.no === item.no) {
              allItem.checkedFlag = !allItem.checkedFlag
            }
          })
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  text-align: right;
}

/deep/ .el-rate__item {
  padding-top: 5px;

  .el-rate__icon {
    font-size: 22px;
  }
}

/deep/ .img-over {
  margin-right: 5px;
  width: 60px;
  height: 45px;
  cursor: pointer;
}

/deep/ .viewer-container {
  z-index: 3000 !important;
}

.line {
  display: inline-block;
  width: 350px;
}

.itemWrapper {
  margin: 10px 0;

  .itemTitle {
    margin-left: 20px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    font-weight: 600;
  }

  .itemBtn {
    margin-right: 20px;
    float: right;
  }
}

.selectWidth {
  width: 230px;
}

.selectWidth1 {
  width: 200px;
}

.subjectSelect {
  display: inline-block;
  width: 180px;
}

.zIndexCss {
  z-index: 3000 !important;
}

.imgCss {
  width: 40px;
  height: 40px;
}

.bindingbtn input {
  border: 1px solid #333;
  height: 44px;
  line-height: 44px;
}

.searchResultCss {
  background-color: #fff;
  width: 180px;
}

/deep/ .el-autocomplete-suggestion {
  width: auto !important;
}

.paginationCss {
  text-align: right;
}

.title {
  display: inline-block;
  height: 50px;
  width: 50%;
}

.textBtn {
  height: 20px;
  margin-left: 5%;
}

.btnListsCss {
  width: 50%;
  height: 50px;
  display: inline-block;
}

.btnCss {
  height: 40px;
  display: inline-block;
  // margin-left: -54px;
  // z-index: 999;
}
</style>
